<!--绝对布局画布配置表单-->
<template>
  <div class="absolute-layout-data-form">
    <Form :label-width="120">
      <FormItem label="背景色">
        <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
        <Checkbox v-model="syncSetPageBgColor">是否同步设置为页面背景色</Checkbox>
      </FormItem>
      <FormItem label="画布宽度 (px)">
        <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="width" :active-change="false"></InputNumber>
<!--        <Select size="small" v-model="widthPixelUnit" :style="{width: '60px'}">
          <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>-->
      </FormItem>
      <FormItem label="画布高度 (px)">
        <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="height" :active-change="false"></InputNumber>
<!--        <Select size="small" v-model="heightPixelUnit" :style="{width: '60px'}">
          <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>-->
      </FormItem>
      <FormItemPanel title="等比例调整画布尺寸">
        <Alert show-icon style="padding-right: 8px; text-align: justify;">
          将当前页面尺寸进行等比例尺寸转换，不影响原始页面布局
        </Alert>
        <Row>
          <i-col span="9" style="text-align: right; line-height: 24px;">
            <span>原宽度：{{width}}</span>
          </i-col>
          <i-col span="2" style="text-align: center; line-height: 22px;">
            <Icon type="md-arrow-round-forward" />
          </i-col>
          <i-col span="13">
            <Input class="w-full" size="small" v-model="newWidth" placeholder="目标宽度，必须正整数"/>
          </i-col>
        </Row>
        <Row class="m-t-5px">
          <i-col span="9" style="text-align: right; line-height: 24px;">
            <span>原高度：{{height}}</span>
          </i-col>
          <i-col span="2" style="text-align: center; line-height: 22px;">
            <Icon type="md-arrow-round-forward" />
          </i-col>
          <i-col span="13">
            <Input class="w-full" size="small" v-model="newHeight" placeholder="目标高度，必须正整数"/>
          </i-col>
        </Row>
        <Row class="m-t-5px">
          <i-col span="24" style="text-align: right;">
            <Button size="small" type="primary" @click="transitionCanvasSize">开始转换</Button>
          </i-col>
        </Row>
      </FormItemPanel>
      <FormItem label="拖拽单位像素 (px)">
        <Tooltip content="拖拽单位像素建议在页面创建时且画布中无任何组件时配置，且建议配置为能被5的倍数，例如5，10，15等（注意：当拖拽单位像素大于1时，组件拖拽对齐磁吸将失效）" max-width="200" placement="left">
          <InputNumber size="small" :max="10000" :min="1" :step="1" v-model="dragPixel"></InputNumber>
        </Tooltip>
      </FormItem>
      <FormItem label="页面缩放方式">
        <Select size="small" v-model="pageScalingMode">
          <Option v-for="item in $PnDict.pageScalingModes" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="隐藏顶部加载进度条">
        <Tooltip content="打开后，页面在发布后，将不会在页面顶部显示页面中所有数据请求的加载时进度条" max-width="200" placement="left">
          <i-switch size="small" v-model="hideHttpLoadingBar"></i-switch>
        </Tooltip>
      </FormItem>

      <FormItemPanel title="背景图片">
        <UploadImageButton v-model="imageRelativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>

        <FormItem label="相对路径">
          <i-input size="small" v-model="imageRelativePath">
            <Button slot="append" icon="md-close" @click="imageRelativePath = ''"></Button>
          </i-input>
        </FormItem>
        <FormItem label="背景重复">
          <Select :transfer="true" size="small" v-model="imageRepeat">
            <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="背景图尺寸">
          <Input size="small" v-model="imageSize" placeholder="参考CSS的background-size"/>
        </FormItem>
      </FormItemPanel>

      <FormItemPanel title="自定义样式">
        <CodeEditor v-if="showCodeEditor" v-model="customStyleCode" mode="css"></CodeEditor>
      </FormItemPanel>
    </Form>

  </div>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'AbsoluteLayoutConfigDataForm',
    props: {
      showCodeEditor: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        newWidth: '',
        newHeight: ''
      }
    },
    created () {

    },
    mounted() {

    },
    methods: {
      transitionCanvasSize () {
        let newWidth = parseInt(this.newWidth) >> 0, newHeight = parseInt(this.newHeight) >> 0
        if(!newWidth || !newHeight || newWidth < 0 || newHeight < 0) {
          this.$Message.error('输入目标数值格式不正确，必须为正整数')
          return
        }
        let layoutConfigData = this.$PnUtil.deepClone(this.pageMetadata.layout.layoutConfigData)
        let scaleNumH = (newWidth/layoutConfigData.width).toFixed(5);
        let scaleNumV = (newHeight/layoutConfigData.height).toFixed(5);
        layoutConfigData.width = newWidth
        layoutConfigData.height = newHeight
        this.$store.commit('designer/setLayoutConfigData', layoutConfigData)

        let layoutItems = this.$PnUtil.deepClone(this.pageMetadata.layout.layoutItems)
        let layoutGroup = this.$PnUtil.deepClone(this.pageMetadata.layout.layoutGroup)
        layoutItems.forEach(layoutItem => {
          layoutItem.layoutItemConfigData.width = layoutItem.layoutItemConfigData.width * scaleNumH >> 0
          layoutItem.layoutItemConfigData.height = layoutItem.layoutItemConfigData.height * scaleNumV >> 0
          layoutItem.layoutItemConfigData.left = layoutItem.layoutItemConfigData.left * scaleNumH >> 0
          layoutItem.layoutItemConfigData.top = layoutItem.layoutItemConfigData.top * scaleNumV >> 0
        })
        this.$store.commit('designer/setLayoutItems', layoutItems)
        layoutGroup.forEach(groupItem => {
          groupItem.groupItemConfigData.width = groupItem.groupItemConfigData.width * scaleNumH >> 0
          groupItem.groupItemConfigData.height = groupItem.groupItemConfigData.height * scaleNumV >> 0
          groupItem.groupItemConfigData.left = groupItem.groupItemConfigData.left * scaleNumH >> 0
          groupItem.groupItemConfigData.top = groupItem.groupItemConfigData.top * scaleNumV >> 0
        })
        this.$store.commit('designer/setLayoutGroup', layoutGroup)

        // 重置
        this.newWidth = ''
        this.newHeight = ''
      }
    },
    computed: {
      ...mapFields({
        pageMetadata: 'pageMetadata',

        width: 'pageMetadata.layout.layoutConfigData.width',
        widthPixelUnit: 'pageMetadata.layout.layoutConfigData.widthPixelUnit',
        height: 'pageMetadata.layout.layoutConfigData.height',
        heightPixelUnit: 'pageMetadata.layout.layoutConfigData.heightPixelUnit',
        dragPixel: 'pageMetadata.layout.layoutConfigData.dragPixel',
        backgroundColor: 'pageMetadata.layout.layoutConfigData.backgroundColor',
        syncSetPageBgColor: 'pageMetadata.layout.layoutConfigData.syncSetPageBgColor',

        imageRelativePath: 'pageMetadata.layout.layoutConfigData.imageRelativePath',
        imageRepeat: 'pageMetadata.layout.layoutConfigData.imageRepeat',
        imageSize: 'pageMetadata.layout.layoutConfigData.imageSize',

        customStyleCode: 'pageMetadata.layout.layoutConfigData.customStyleCode',
        pageScalingMode: 'pageMetadata.layout.layoutConfigData.pageScalingMode',

        hideHttpLoadingBar: 'pageMetadata.layout.layoutConfigData.hideHttpLoadingBar',
      })
    }
  }
</script>

<style scoped>
  .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
